<template>
  <el-dialog :title="isEdit?'编辑客户信息':'新增客户信息'"
             :visible.sync="dialogForm"
             width="1100px">
    <el-form :inline="true"
             ref="form"
             :model="form"
             :rules="rules"
             class="add-form"
             label-width="110px">
      <h3>客户基础信息</h3>
      <hr>
      <br />
      <el-row>
        <el-col :span="8">
          <el-form-item label="客户名称"
                        prop="name">
            <el-input type="text"
                      v-model.trim="form.name"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户简称"
                        prop="shortName">
            <el-input type="text"
                      v-model.trim="form.shortName"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户单位代码"
                        prop="customerCode">
            <el-input type="text"
                      v-model.trim="form.customerCode"
                      clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="社会信用代码"
                        prop="creditCode">
            <el-input type="text"
                      v-model.trim="form.creditCode"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法定代表人"
                        prop="legalPerson">
            <el-input type="text"
                      v-model.trim="form.legalPerson"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人"
                        prop="linkMan">
            <el-input type="text"
                      v-model.trim="form.linkMan"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话"
                        prop="linkTel">
            <el-input type="text"
                      v-model.trim="form.linkTel"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="企业性质">
            <el-select v-model="form.entNature"
                       placeholder="请选择"
                       clearable>
              <el-option v-for="[key, val] in _dictCompanyNature"
                         :key="key"
                         :label="val"
                         :value="key"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上级单位">
            <search-custom v-model="form.parentOrgId"
                           @select="v=>form.parentOrgId=v"
                           @selectName="v=>form.parentOrgName=v"
                           :name="form.parentOrgName"
                           :isShipAgent="true"></search-custom>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="注册资本(万元)"
                        prop="regeditAmount">
            <el-input v-model.number="form.regeditAmount"
                      type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="成立日期">
            <el-date-picker v-model="form.regDate"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="注册地址"
                        prop="regAddress">
            <el-input type="text"
                      v-model.trim="form.regAddress"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="办公地址"
                        prop="address">
            <el-input type="text"
                      v-model.trim="form.address"
                      clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="主营信息"
                        prop="busScope">
            <el-input type="textarea"
                      :rows="3"
                      style="width: 388px"
                      placeholder="请输入内容"
                      :maxLength="$maxLength"
                      v-model="form.busScope"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注"
                        prop="remark">
            <el-input type="textarea"
                      :rows="3"
                      style="width: 388px"
                      placeholder="请输入内容"
                      :maxLength="$maxLength"
                      v-model="form.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <h3>客户银行信息</h3>
      <hr>
      <br />
      <el-row style="margin-bottom: 18px;">
        <el-col :span="24">
          <!-- <el-form-item label=" "
                        class="customFormBankWidth"> -->
          <el-table :data="form.customBank"
                    border>
            <el-table-column label="序号"
                             min-width="50">
              <template slot-scope="scope">
                {{ scope.$index+1 }}
              </template>
            </el-table-column>
            <el-table-column label="账户类型"
                             min-width="120">
              <template slot-scope="scope">
                <el-select v-model="scope.row.bankAccountType">
                  <el-option v-for="[key, val] of _dictBankType"
                             :label="val"
                             :value="key"
                             :key="key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="开户银行"
                             min-width="120">
              <template slot-scope="scope">
                <el-input maxLength="32"
                          v-model="scope.row.openBank"
                          clearable></el-input>

              </template>
            </el-table-column>
            <el-table-column label="银行账号"
                             min-width="120">
              <template slot-scope="scope">
                <el-input maxLength="32"
                          v-model.trim="scope.row.bankNo"
                          clearable></el-input>
              </template>
            </el-table-column>
            <el-table-column label="账户名称"
                             min-width="120">
              <template slot-scope="scope">
                <el-input maxLength="32"
                          v-model.trim="scope.row.bankName"
                          clearable></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作"
                             width="120"
                             align="center">
              <template slot-scope="scope">
                <el-button size="small"
                           type="text"
                           @click="handleAddTable(scope.row)">复制</el-button>
                <el-button :disabled="form.customBank.length===1"
                           type="text"
                           class="danger"
                           @click="form.customBank.splice(scope.$index,1)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- </el-form-item> -->
        </el-col>
      </el-row>
      <h3>客户账户信息</h3>
      <hr>
      <br />
      <el-row>
        <el-col :span="24">
          <!-- <el-form-item label=" "
                        class="customFormBankWidth"> -->
          <el-table :data="form.cargoOwnerAccounts"
                    border
                    max-height="300">
            <el-table-column label="序号"
                             min-width="50">
              <template slot-scope="scope">
                {{ scope.$index+1 }}
              </template>
            </el-table-column>
            <el-table-column label="货主名称"
                             min-width="204">
              <template slot-scope="scope">
                <el-input maxLength="32"
                          v-model.trim="scope.row.name"
                          clearable></el-input>
              </template>
            </el-table-column>
            <!-- <el-table-column label="账户简称"
                             min-width="150">
              <template slot-scope="scope">
                <el-input maxLength="32"
                          v-model.trim="scope.row.openBank"
                          clearable></el-input>
              </template>
            </el-table-column> -->
            <el-table-column label="助记码"
                             min-width="150">
              <template slot-scope="scope">
                <el-input maxLength="32"
                          v-model.trim="scope.row.mnemonicCode"
                          clearable></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="accountType"
                             label="账户类型"
                             min-width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.accountType"
                           placeholder="请选择"
                           clearable>
                  <el-option v-for="[key, val] in _dictAccountTypes"
                             :key="key"
                             :label="val"
                             :value="key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="accountNature"
                             label="账户性质"
                             min-width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.accountNature"
                           placeholder="请选择"
                           clearable>
                  <el-option v-for="[key, val] in _dictAccountNature"
                             :key="key"
                             :label="val"
                             :value="key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="是否托盘账户"
                             min-width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.pallets"
                           placeholder="请选择"
                           clearable>
                  <el-option v-for="[key, val] in _dictTrueOrFalse"
                             :key="key"
                             :label="val"
                             :value="key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="是否钢厂单位"
                             min-width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.ifSteelMillUnit"
                           placeholder="请选择"
                           clearable>
                  <el-option v-for="[key, val] in _dictTrueOrFalse"
                             :key="key"
                             :label="val"
                             :value="key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="逾期类型"
                             min-width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.overdueType"
                           placeholder="请选择"
                           clearable>
                  <el-option v-for="[key, val] in _dictOverdueType"
                             :key="key"
                             :label="val"
                             :value="key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="逾期值（天/元）"
                             min-width="150">
              <template slot-scope="scope">
                <el-input maxLength="32"
                          v-model.trim="scope.row.overdueValue"
                          clearable></el-input>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="bankName"
                             label="逾期值（元）"
                             min-width="120">
              <template slot-scope="scope">
                <el-input maxLength="32"
                          v-model.trim="scope.row.overdueValue"
                          clearable></el-input>
              </template>
            </el-table-column> -->
            <el-table-column label="是否收转库费"
                             min-width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.transferFee"
                           placeholder="请选择"
                           clearable>
                  <el-option v-for="[key, val] in _dictTrueOrFalse"
                             :key="key"
                             :label="val"
                             :value="key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="报表是否统计"
                             min-width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.statistics"
                           placeholder="请选择"
                           clearable>
                  <el-option v-for="[key, val] in _dictTrueOrFalse"
                             :key="key"
                             :label="val"
                             :value="key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <!-- <el-table-column label="联系人"
                             min-width="150">
              <template slot-scope="scope">
                <el-input maxLength="32"
                          v-model.trim="scope.row.linkMan"
                          clearable></el-input>
              </template>
            </el-table-column>
            <el-table-column label="联系电话"
                             min-width="150">
              <template slot-scope="scope">
                <el-input maxLength="32"
                          v-model.trim="scope.row.linkTel"
                          clearable></el-input>
              </template>
            </el-table-column> -->
            <el-table-column label="附件信息"
                             width="280"
                             align="center">
              <template slot-scope="scope">
                <attachments v-model="scope.row.attachments"></attachments>
                <download v-model="scope.row.attachments"></download>
              </template>
            </el-table-column>
            <el-table-column label="操作"
                             fixed="right"
                             width="120"
                             align="center">
              <template slot-scope="scope">
                <el-button size="small"
                           type="text"
                           @click="handleAddTable2(scope.row)">复制</el-button>
                <el-button :disabled="form.cargoOwnerAccounts.length===1"
                           type="text"
                           class="danger"
                           @click="form.cargoOwnerAccounts.splice(scope.$index,1)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- </el-form-item> -->
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer"
         class="dialog-footer"
         >
      <el-button @click="dialogForm = false">取 消</el-button>
      <el-button type="primary"
                 @click="handleSubmit"
                 :loading="$store.getters.loadingBtn">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addCustomer, updateCustomer } from '@/api/commerce/customer'
import {
  PRIVATE_CODE,
  PUBLIC_LIMIT,
  PUBLIC_NOT_CHINESE,
  PUBLIC_TEL,
  REG_ALL_NUMBER,
  REG_CHINESE,
  REG_LIMIT,
  REG_NUMBER,
  REG_TEXT,
  PUBLIC_NUM_CODE
} from '@/utils/Reg'
import {
  creditCodeLength,
  creditCodeMinLength,
  maxLength,
  normalLength,
  sortLength,
  telLength
} from '@/utils/rules'
import attachments from '@/components/file-upload'
import download from '@/components/download'
import searchCustom from '@/components/autocomplete/autoSearchCustom'

export default {
  name: 'addCustomer',
  components: { attachments, download, searchCustom },
  data() {
    return {
      form: this.clearForm(),
      rules: {
        creditCode: [
          { message: '请输入社会信用代码', trigger: 'change' },
          { validator: PUBLIC_NUM_CODE, trigger: 'change' },
          creditCodeLength,
          creditCodeMinLength
        ],
        name: [
          { required: true, validator: PUBLIC_LIMIT, trigger: 'change' },
          sortLength
        ],
        shortName: [{ validator: PUBLIC_LIMIT, trigger: 'change' }, sortLength],
        regeditAmount: [
          {
            message: '请输入正确的数字',
            pattern: REG_ALL_NUMBER,
            trigger: 'blur'
          }
        ],
        legalPerson: [
          { message: '请输入中文', pattern: REG_CHINESE, trigger: 'change' },
          sortLength
        ],
        linkMan: [
          { message: '请输入中文', pattern: REG_CHINESE, trigger: 'change' },
          sortLength
        ],
        regAddress: [
          { validator: PUBLIC_LIMIT, trigger: 'change' },
          normalLength
        ],
        linkTel: [
          {
            message: '请输入正确的数字',
            validator: PUBLIC_TEL,
            trigger: 'change'
          },
          telLength
        ],
        customerCode: [
          { required: true, validator: PRIVATE_CODE, trigger: 'change' }
        ],
        address: [normalLength],
        busScope: [maxLength],
        remark: [maxLength]
      },
      isEdit: false, // 是否编辑表单
      dialogForm: false
    }
  },
  mounted() {},
  methods: {
    clearForm() {
      return {
        address: '',
        busScope: '',
        creditCode: '',
        customerCode: '',
        customerType: null,
        entNature: '',
        legalPerson: '',
        linkMan: '',
        linkTel: '',
        name: '',
        parentOrgId: null,
        parentOrgName: null,
        regAddress: '',
        regDate: '',
        regeditAmount: '',
        remark: '',
        shortName: '',
        customBank: [
          {
            sortNo: 1,
            bankAccountType: '',
            bankName: '',
            bankNo: '',
            openBank: ''
          }
        ],
        cargoOwnerAccounts: [
          {
            name: '',
            mnemonicCode: '',
            ifDelivery: false,
            ifSteelMillUnit: false,
            accountType: '',
            accountNature: '',
            overdueType: '',
            overdueValue: 0,
            pallets: false,
            transferFee: false,
            statistics: false,
            remark: null,
            attachments: null
            // attachments: [
            // {
            //   id: 0,
            //   filePath: '',
            //   fileSize: '',
            //   fileType: '',
            //   fileName: ''
            // }
            // ]
          }
        ]
      }
    },
    // 复制
    handleAddTable(item) {
      let params = { ...item }
      params.sortNo = this.form.customBank.length + 1
      this.form.customBank.push(params)
    },
    handleAddTable2(item) {
      let params = { ...item }
      params.sortNo = this.form.cargoOwnerAccounts.length + 1
      this.form.cargoOwnerAccounts.push(params)
    },
    // 提交表单
    handleSubmit() {
      // 避免重复提交时 提示报错
      let bank = this.form.customBank
      for (let i = 0; i < bank.length; i++) {
        let banks = Object.values(bank[i])
        for (let j = 0; j < banks.length; j++) {
          if (banks[j] === '') {
            let msg = ''
            msg = j === 1 ? '开户银行' : j === 2 ? '银行账号' : '账户名称'
            this.$message({
              message: `${msg}不能为空! 请填写完整的银行信息`,
              type: 'error'
            })
            return
          }
        }
      }
      for (let i = 0; i < bank.length; i++) {
        if (!REG_TEXT.test(bank[i].openBank)) {
          this.$message({
            message: `开户银行只能输入中文,英文及数字`,
            type: 'error'
          })
          return
        }
        if (!REG_NUMBER.test(bank[i].bankNo)) {
          this.$message({
            message: `银行账号只能输入数字`,
            type: 'error'
          })
          return
        }
        if (!REG_TEXT.test(bank[i].bankName)) {
          this.$message({
            message: `账户名称只能输入中文,英文及数字`,
            type: 'error'
          })
          return
        }
      }
      //保存
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isEdit ? this.handleToEdit() : this.handleToAdd()
        } else {
          this.$message({
            message: '请检查表单',
            type: 'error'
          })
        }
      })
    },
    // 新增
    handleToAdd() {
      addCustomer(this.form).then(res => {
        this.$message({ message: '新增成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
        this.$storageMsg('loadData')
      })
    },
    // 编辑
    handleToEdit() {
      updateCustomer(this.form.id, this.form).then(res => {
        this.$message({ message: '编辑成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
        this.$storageMsg('loadData')
      })
    },
    // 添加银行信息
    handleAddBank() {
      this.form.customBank.push({
        bankAccountType: '',
        openBank: '',
        bankNo: '',
        bankName: ''
      })
    }
  },
  watch: {
    dialogForm(bool) {
      if (!bool) {
        this.$refs.form.resetFields()
        this.isEdit = false
        this.form = this.clearForm()
      } else {
        // console.log(this.form)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
